<template>
    <div>
        <div class='good'>
            <div class='good_top'>
                <div class='ziliao'>
                    <div style='margin-top:60rpx;margin-left:30rpx;'>
                        <span style='font-size: 60rpx; color:#383838;'>ONE</span>
                        <div class='vip' style=''>会员主子</div>
                    </div>
                    <div class='touxiang'>
                        <img style='width:128rpx;height:128rpx;border-radius: 66rpx;' src='/static/images/index_pet1.png' />
                        <div class='touxiang_text'>当前积分
                            <span>820</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class='good_tuijian'>
                <div class='good_tuijian_text'>为您推荐</div>
                <div class='good_tuijian_vip'>
                    <div class='good_tuijian_fen'></div>
                    <div class='good_tuijian_vip_text'>会员主子专场秀</div>
                    <div class='good_tuijian_fen'></div>

                </div>

            </div>

            <div class='wares'>
                <div class='wares_box' v-for='(good,index) in goodList' :key="index" @click='details'>
                    <div class='wares_box_img'>
                        <img :src='good.cover' />
                    </div>
                    <div class='wares_box_text'>
                        <span class='name'>{{good.desc}}</span>
                        <span class='xiangxi'>{{good.desc2}}</span>
                        <span class='tolie1'>
                            <span class='tolie2'>{{good.price}}</span>
                            <span style=' font-size: 28rpx; color:#a6a6a6; text-decoration:line-through;'>{{good.yuanjia}}</span>
                        </span>
                    </div>
                    <div class='wares_box_gongne'>
                        <img src='/static/images/collect.png' />
                        <img src='/static/images/shop.png' />
                        <div class='wares_box_but'>立即购买</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";

export default {
    components: {
        card
    },

    data() {
        return {
            goodList: [
                {
                    cover: "/static/images/wares_box1.jpg",
                    isbn: "9787535482051",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 139,
                    yuanjia: 159,
                    count: 1,
                    checked: false
                },
                {
                    cover: "/static/images/wares_box1.jpg",
                    isbn: "9787535482051",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 139,
                    yuanjia: 159,
                    count: 1,
                    checked: false
                },
                {
                    cover: "/static/images/wares_box1.jpg",
                    isbn: "9787535482051",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 139,
                    yuanjia: 159,
                    count: 1,
                    checked: false
                },
                {
                    cover: "/static/images/wares_box1.jpg",
                    isbn: "9787535482051",
                    desc: "BROYAL CATFOOD",
                    desc2: "ADUIT & PUPPY CATS",
                    price: 139,
                    count: 1,
                    checked: false
                }
            ]
        };
    },

    created() {
        const logs = wx.getStorageSync("logs") || [];
        this.logs = logs.map(log => formatTime(new Date(log)));
    },
    methods: {}
};
</script>

<style>
.good_top {
    width: 100%;
    height: 260rpx;
    background: #ff8d1a;
}

.good_top .ziliao {
    display: flex;
    justify-content: space-between;
}

.good_top .ziliao .touxiang {
    margin-top: 60rpx;
    margin-right: 30rpx;
    text-align: center;
}

.good_top .ziliao .vip {
    border: 1px solid #fff;
    border-radius: 47rpx;
    width: 150rpx;
    height: 49rpx;
    font-size: 28rpx;
    text-align: center;
    line-height: 49rpx;
    color: #fff;
}

.good_top .ziliao .touxiang_text {
    color: #fff;
    font-size: 28rpx;
}

.good_tuijian_text {
    color: #ff703a;
    font-size: 35rpx;
    font-weight: bold;
    text-align: center;
    margin: 20rpx;
}

.good_tuijian_vip {
    display: flex;
    justify-content: space-between;
    align-items: Center;
    margin-bottom: 20rpx;
}

.good_tuijian_vip_text {
    color: #505050;
    font-size: 26rpx;
}

.good_tuijian_fen {
    width: 213rpx;
    height: 2rpx;
    background-color: #cdcdcd;
}

.wares {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
}

.wares_box {
    width: 366rpx;
    height: 576rpx;
}

.wares_box_img img {
    width: 366rpx;
    height: 366rpx;
}

.wares_box_text {
    display: flex;
    flex-direction: column;
}

.wares_box_text .name {
    color: #505050;
    font-size: 26rpx;
}

.wares_box_text .xiangxi {
    color: #a6a6a6;
    font-size: 20rpx;
    margin: 4rpx 0;
}

.wares_box_text .tolie1 {
    color: #a6a6a6;
    font-size: 16rpx;
}

.wares_box_text .tolie2 {
    color: #f00;
    font-size: 28rpx;
    font-weight: bold;
    margin-left: 10rpx;
}

.wares_box_gongne {
    display: flex;
    justify-content: center;
    align-items: Center;
}

.wares_box_gongne img {
    width: 32rpx;
    height: 32rpx;
    margin-right: 50rpx;
}

.wares_box_but {
    width: 116rpx;
    height: 47rpx;
    color: #fff;
    background-color: #ff8d1a;
    font-size: 24rpx;
    text-align: center;
    line-height: 47rpx;
    /* margin-left: 50rpx; */
}
</style>
